<!--
 * @Descripttion: 交易设置
 * @Author: DXV-RGWU-TUFH-RFCY-IEGMYY
 * @Date: 2020-09-28 15:24:24
 * @LastEditors: DXV-RGWU-TUFH-RFCY-IEGMYY
 * @LastEditTime: 2023-03-13 19:09:20
-->
<template>
  <div class="lb-system-transaction">
    <top-nav />
    <div class="page-main">
      <lb-tips>
        系统默认用户订单处于待核销状态或完成订单后24小时内可申请退款
      </lb-tips>
      <el-form
        @submit.native.prevent
        :model="subForm"
        ref="subForm"
        :rules="subFormRules"
        label-width="120px"
      >
        <el-form-item label="提现方式" prop="checkList">
          <el-checkbox-group v-model="checkList" @change="changeCheckBox">
            <div
              v-for="(item, index) in authList"
              :key="index"
              :style="{
                display: 'inline-block',
                marginLeft: index === 0 ? 0 : '15px'
              }"
            >
              <el-checkbox :label="item.title"></el-checkbox>
              <lb-tool-tips v-if="item.tips">{{ item.tips }}</lb-tool-tips>
            </div>
          </el-checkbox-group>
        </el-form-item>
        <el-form-item label="转账方式" prop="company_pay">
          <el-radio-group v-model="subForm.company_pay">
            <el-radio :label="1">企业转账</el-radio>
            <el-radio :label="2">商家转账</el-radio>
          </el-radio-group>
          <lb-tool-tips>用于微信线上提现</lb-tool-tips>
        </el-form-item>
        <el-form-item label="打赏比例" prop="reward">
          <el-input-number v-model="subForm.reward" :max="100" :min="0"></el-input-number>
          <!-- <el-input v-model="subForm.reward" placeholder="请输入打赏比例"></el-input> -->
        </el-form-item>
        <el-form-item label="订单超时" prop="over_time">
          <el-input v-model.number="subForm.over_time" placeholder="请输入分钟">
            <template slot="append">分钟</template>
          </el-input>
          <lb-tool-tips
            >订单未支付超时时间，超时将自动取消订单，单位：分钟</lb-tool-tips
          >
        </el-form-item>
        <el-form-item label="时间间隔" prop="time_interval">
          <el-input
            v-model.number="subForm.time_interval"
            placeholder="请输入分钟"
          >
            <template slot="append">分钟</template>
          </el-input>
          <lb-tool-tips
            >{{
              $t('action.attendantName')
            }}结束上一单之后，与下一单的时间无间隔导致{{
              $t('action.attendantName')
            }}不能赶到下一个服务点
            <div class="mt-sm">可设置订单间隔，例如设置订单间隔为30分钟</div>
            <div class="mt-sm">
              上一个订单预约时间是14:00-15:00，则下一个用户预约同一个{{
                $t('action.attendantName')
              }}的开始时间为15:30之后
            </div></lb-tool-tips
          >
        </el-form-item>
        <el-form-item label="最长预约" prop="max_day">
          <el-select v-model="subForm.max_day" placeholder="请选择">
            <el-option
              v-for="item in longOptions"
              :key="item.id"
              :label="item.title"
              :value="item.id"
            ></el-option>
          </el-select>
          <lb-tool-tips>客户预约服务选择时间时可选择的时间期限</lb-tool-tips>
        </el-form-item>
        <el-form-item label="时长单位" prop="time_unit">
          <el-select v-model="subForm.time_unit" placeholder="请选择">
            <el-option
              v-for="item in timeOptions"
              :key="item.id"
              :label="item.title"
              :value="item.id"
            ></el-option>
          </el-select>
          <lb-tool-tips>划分工作时间的时间单位</lb-tool-tips>
        </el-form-item>
        <el-form-item label="交易规则" prop="trading_rules">
          <lb-ueditor
            v-model="subForm.trading_rules"
            :destroy="true"
            :ueditorType="3"
          ></lb-ueditor>
        </el-form-item>
        <el-form-item>
          <lb-button type="primary" @click="submitForm" v-preventReClick>{{
            $t('action.submit')
          }}</lb-button>
        </el-form-item>
      </el-form>
    </div>
  </div>
</template>

<script>
export default {
  data () {
    let checkList = (rule, value, callback) => {
      let { wechat_transfer: wechat = 0, alipay_transfer: alipay = 0, under_transfer: under } = this.subForm
      if (!wechat && !alipay && !under) {
        callback(new Error(`请选择提现方式`))
      } else {
        callback()
      }
    }
    return {
      checkList: [],
      authList: [{ title: '微信提现', key: 'wechat_transfer' }, { title: '支付宝提现', key: 'alipay_transfer' }, { title: '线下提现', key: 'under_transfer', tips: '用于用户、' + this.$t('action.attendantName') + '或代理商提现时选择到账方式' }],
      longOptions: [{ id: 3, title: '近3天' }, { id: 5, title: '近5天' }, { id: 7, title: '近7天' }],
      timeOptions: [{ id: 30, title: '半小时' }, { id: 60, title: '一小时' }, { id: 120, title: '两小时' }],
      subForm: {
        wechat_transfer: 0,
        alipay_transfer: 0,
        under_transfer: 0,
        company_pay: 1,
        over_time: '',
        time_interval: '',
        service_cover_time: '',
        max_day: '',
        time_unit: '',
        trading_rules: '',
        reward: 0
      },
      subFormRules: {
        checkList: { required: true, validator: checkList, trigger: ['blur', 'change'] },
        company_pay: { required: true, type: 'number', message: '请选择转账方式', trigger: 'blur' },
        over_time: { required: true, validator: this.$reg.isNum, reg_type: 2, text: '分钟数', trigger: 'blur' },
        time_interval: { required: true, validator: this.$reg.isNum, reg_type: 2, text: '分钟数', trigger: 'blur' },
        max_day: { required: true, type: 'number', message: '请选择最长预约', trigger: 'blur' },
        time_unit: { required: true, type: 'number', message: '请选择时长单位', trigger: 'blur' }
      }
    }
  },
  created () {
    this.getFormInfo()
  },
  methods: {
    async getFormInfo () {
      let { code, data } = await this.$api.system.configInfo()
      if (code !== 200) return
      for (let key in this.subForm) {
        this.subForm[key] = data[key]
      }
      let checkItem = []
      this.authList.map(item => {
        if (data[item.key] === 1) {
          checkItem.push(item.title)
        }
      })
      this.checkList = checkItem
    },
    changeCheckBox (e) {
      this.authList.map(item => {
        this.subForm[item.key] = e.includes(item.title) ? 1 : 0
      })
    },
    async submitForm () {
      let flag = false
      this.$refs['subForm'].validate(valid => {
        if (valid) {
          flag = true
        }
      })
      let subForm = JSON.parse(JSON.stringify(this.subForm))
      if (flag) {
        await this.$api.system.configUpdate(subForm)
        this.$message.success(this.$t('tips.successSub'))
      }
    }
  }
}
</script>

<style lang="scss" scoped>
.lb-system-transaction {
  width: 100%;
  .page-main {
    padding: 20px;
    .el-form {
      width: 100%;
      .el-form-item {
        margin-bottom: 24px;
        .el-select,
        .el-input-number,
        .el-input {
          width: 300px;
        }
      }
      .last-form-item {
        margin-top: 30px;
      }
      .item-tips {
        margin-left: 120px;
        margin-bottom: 24px;
        color: #999999;
      }
    }
  }
}
</style>
